<template>
  <!-- 拆卸时间 -->
  <FormItem>
    <template #label>
      <span
        class="content-item-label"
        :style="{
          color: themeStyle[theme].textColor1
        }"
        >{{ '拆卸时间' }}</span
      >
    </template>
    <div style="display: flex">
      <Input
        v-model:value="Nodedata.simData.disassemble.disassembleTime"
        type="number"
        size="small"
      />
    </div>
  </FormItem>

  <!-- 拆卸数量 -->
  <FormItem>
    <template #label>
      <span
        class="content-item-label"
        :style="{
          color: themeStyle[theme].textColor1
        }"
        >{{ '拆卸数量' }}</span
      >
    </template>
    <div style="display: flex">
      <Input
        v-model:value="Nodedata.simData.disassemble.quantity"
        type="number"
        size="small"
        :disabled="true"
      />
      <div class="refresh-btn" @click="refreshQuantity">刷新</div>
    </div>
  </FormItem>

  <!-- 产品样式 -->
  <FormItem>
    <template #label>
      <span
        class="content-item-label"
        :style="{
          color: themeStyle[theme].textColor1
        }"
        >{{ '产品样式' }}</span
      >
    </template>
    <div style="display: flex">
      <Popover :placement="'bottomRight'" :trigger="'click'" @open-change="handleChange">
        <template #content> <CustomProductStyle /> </template>
        <div v-if="!Nodedata.lock" class="custom-product-btn">产品编辑</div>
      </Popover>
      <div
        class="custom-product-preview"
        :style="{ backgroundColor: Nodedata.simData.product.backgroundColor }"
      ></div>
    </div>
  </FormItem>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { FormItem, Input, Popover } from 'ant-design-vue'
import CustomProductStyle from './CustomProductStyle.vue'

import { Nodedata, handleChange } from './nodeProTemHook'

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)

const refreshQuantity = () => {
  //获取连接的边
  const edges = window.api.handleCanvasData('getEdges', 'property', false, [
    'sourceId',
    Nodedata.value.id
  ])

  if (edges.length > 0) {
    const targetNodeId = new Set<string>()

    edges.forEach((edge) => {
      const tempResult = window.api.handleCanvasData('getNodes', 'property', false, [
        'id',
        edge.targetId as string
      ])

      if (tempResult.length > 0) {
        targetNodeId.add(tempResult[0].id)
      }

      const tempResult2 = window.api.handleCanvasData('getEdges', 'property', false, [
        'id',
        edge.targetId as string
      ])
      if (tempResult2.length > 0) {
        targetNodeId.add(tempResult2[0].id)
      }
    })

    Nodedata.value.simData.disassemble.quantity = targetNodeId.size
    handleChange()
  }
}
</script>

<style scoped lang="scss">
.content-item-label {
  font-size: $font-size-small;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.refresh-btn {
  width: 80px;
  text-align: center;
  border: 1px solid #cecece;
  color: #449bd1;
  cursor: pointer;
}
.custom-product-btn {
  border: 1px solid #cecece;
  color: #449bd1;
  padding: 0px 5px;
  cursor: pointer;
  margin-right: 10px;
  font-size: $font-size-small;
}
.custom-product-preview {
  width: 24px;
  height: 24px;
  background-color: #7e7e7e;
}
</style>
